<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="工序名" prop="ProcedureName">
			<el-input v-model="ruleForm.ProcedureName" />
		</el-form-item>
		<el-form-item label="工序描述" prop="ProcedureDesc">
			<el-input v-model="ruleForm.ProcedureDesc" autocomplete="off" />
		</el-form-item>
		<el-form-item label="分组" prop="ProcedureOrder">
			<el-input v-model="ruleForm.ProcedureOrder"  autocomplete="off" />
		</el-form-item>
		<el-form-item label="业务名" prop="BusinessId">
			<el-select v-model="ruleForm.BusinessId" placeholder="请选择业务" :options="optionsDect">
				<el-option v-for=" item in optionsDect" :key="item.Id" :label="item.BusinessName"
                    :value="parseInt(item.Id)">
                </el-option>
			</el-select>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'

import procedureinfoapi from "../../api/procedureinfoapi"
const props = defineProps({
    Id: Number,
});
const emit = defineEmits(['onSave'])

interface RuleForm {
    ProcedureOrder: number
	ProcedureName: string
	ProcedureDesc: string
	BusinessId:number

}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    ProcedureOrder: 1,
	ProcedureName: '',
	ProcedureDesc: '',
	BusinessId:0

})
const optionsDect = ref<any>([
])
procedureinfoapi.BusGet().then((res:any) => {
	console.log("res", res.data)
	optionsDect.value = res.data
})

const getData = () => {
    procedureinfoapi.get(props.Id!).then(res => {
        console.log("aaa=", res.data);
        ruleForm.value = res.data
    })
}
onMounted(() => {
    getData();
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("ruleForm.data", ruleForm.value)

            procedureinfoapi.put(props.Id,ruleForm.value).then((res:any) => {
                console.log("rws",res)
                if (res.code == 1) {
                    ElNotification({
                        title: 'Success',
                        message: '修改成功',
                        type: 'success',
                        duration: 800,
                        onClose: () => {
                            emit("onSave", true)
                        }
                    })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '失败',
                        type: 'error',
                        duration: 800,
                    })
                }
            }).catch((err:any) => {
                ElNotification({
                    title: 'Error',
                    message: '失败',
                    type: 'error',
                    duration: 800,
                })
                console.log("err",err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>